<template>
  <div>
    <el-dialog :title="tableData.id ? '编辑面板' : '新增面板'" :visible="visible" width="500px" @close="$emit('update:visible',false)">
      <el-row>
        <el-form ref="form" label-width="100px" label-position="right" style="width: 100%" :model="tableData" :rules="rules">
          <el-form-item label="模板类型" prop="templateType">
            <el-select v-model="tableData.templateType">
              <el-option
                v-for="v in templateTypeArr"
                :key="v.value"
                :label="v.label"
                :value="v.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="运送类型" prop="transportType">
            <el-select v-model="tableData.transportType">
              <el-option
                v-for="v in transportTypeArr"
                :key="v.value"
                :value="v.value"
                :label="v.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关联城市" prop="associatedCityList">
            <el-select v-model="tableData.associatedCityList[0]">
              <el-option
                v-for="v in associatedCityListArr"
                :key="v.value"
                :value="v.value"
                :label="v.label"
              >{{ v.label }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="首重价格" class="mainly" prop="firstWeight">
            <el-input v-model="tableData.firstWeight">
              <template #suffix>
                <span>元</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="续重价格" class="mainly" prop="continuousWeight">
            <el-input v-model="tableData.continuousWeight">
              <template #suffix>
                <span>元</span>
              </template>
            </el-input>

          </el-form-item>
          <el-form-item label="轻抛系数" class="mainly" prop="lightThrowingCoefficient">
            <el-input v-model="tableData.lightThrowingCoefficient" />
          </el-form-item>
          <el-row type="flex" justify="center">
            <el-button @click="onSubmit">确定</el-button>
            <el-button @click="grace">取消</el-button>
          </el-row>
        </el-form>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { addTemplateAPI, freightStencilListAPI } from '@/api/basicData'
export default {
  props: { visible: Boolean },
  data() {
    return {
      // 新增需要的数据
      tableData: {
        // 模板类型
        templateType: '',
        // 运送类型
        transportType: '',
        // 关联城市
        associatedCityList: [],
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
      },
      associatedCityListArr: [
        {
          value: '1',
          label: '全国'
        },
        {
          value: '2',
          label: '京津冀'
        },
        {
          value: '3',
          label: '江浙沪'
        },
        {
          value: '4',
          label: '川渝'
        },
        {
          value: '5',
          label: '黑吉辽'
        }
      ],
      // 模板类型
      templateTypeArr: [
        {
          value: 1,
          label: '同城寄'
        },
        {
          value: 2,
          label: '省内寄'
        },
        {
          value: 3,
          label: '经济区互寄'
        },
        {
          value: 4,
          label: '跨省'
        }
      ],
      // 运送类型
      transportTypeArr: [
        {
          value: 1,
          label: '普快'
        },
        {
          value: 2,
          label: '特快'
        }
      ],
      // 字段校验
      rules: {
        // 模板类型
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'blur' }],
        // 运送类型
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'blur' }],
        // 关联城市
        associatedCityList: [{ required: true, message: '关联城市不能为空', trigger: 'blur' }],
        // 首重价格
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' }],
        // 续重价格
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' }],
        // 轻抛系数
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 表单提交
    async onSubmit() {
      this.$refs.form.validate().then(async() => {
        await addTemplateAPI(this.tableData)
        this.$emit('UpdateTemplate')
        this.$emit('update:visible', false)
        this.tableData.id ? this.$message.success('编辑运费模板成功') : this.$message.success('新增运费模板成功')
      }, (err) => {
        console.log('err  ----->  ', err)
      })
    },
    grace() {
      this.$refs.form.resetFields()
      this.$emit('update:visible', false)
    },
    async freightEdit(id) {
      const { data } = await freightStencilListAPI()
      const result = data.filter(v => v.id === id)
      console.log('result  ----->  ', result)
      this.tableData = {
        associatedCityList: result[0].associatedCityList,
        continuousWeight: result[0].continuousWeight,
        firstWeight: result[0].firstWeight,
        lightThrowingCoefficient: result[0].lightThrowingCoefficient,
        templateType: result[0].templateType,
        transportType: result[0].transportType,
        id: result[0].id
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header{
  padding: 15px 30px 15px;
  background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
}
::v-deep .el-dialog{
  border-radius: 8px;
}
::v-deep .el-form{
  padding-right: 40px;
  margin-top: 10px;
}
::v-deep .el-button{
  width: 90px;
  border-radius: 5px;
  font-weight: 400;
  margin-top: 10px;
}
::v-deep .el-input__suffix-inner{
    color: #20232a;
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
}
</style>
